<template>
	<view class="fwcontainer">		
		<uni-grid :column="grid_column" :highlight="true" @change="bindItemChange">
			<uni-grid-item v-for="(item, index) in grid_items" :index="index" :key="index">
				<view class="grid-item-box">
					<text class="item-text">{{ item.text }}</text>
				</view>
			</uni-grid-item>
		</uni-grid>
	</view>
</template>

<script>
	import uniGrid from "@/components/uni-grid/uni-grid.vue"
	import uniGridItem from "@/components/uni-grid-item/uni-grid-item.vue"
	
	export default {
	    components: {uniGrid,uniGridItem},
		data() {
			return {
				grid_column:3,
				grid_items:[					
					{action:'search',text:'综合\n查询'},
					{action:'cars',text:'车辆\n管理'},
					{action:'record',text:'维护\n管理'},				
					{action:'maintain',text:'汽车\n保养'},
					{action:'repair',text:'汽车\n维修'},
					{action:'painting',text:'钣金\n喷漆'},
					{action:'technology',text:'技术\n支持'}
				]
			}
		},
		computed:{
			
		},
		methods:{
			bindItemChange(e){		
				var item = this.grid_items[e.detail.index], jump_url = '';
				if('repair' == item.action){
					jump_url = '/pages/repair/repair';
				}else if('maintain' == item.action){
					jump_url = '/pages/maintain/maintain';
				}else if('painting' == item.action){
					jump_url = '/pages/painting/painting';
				}			
				if('' != jump_url && null != jump_url){
					uni.switchTab({
						url:jump_url
					});
					return;
				}
				
				if('cars' == item.action){
					jump_url = '/pages/home/sub/cars';
				}else if('record' == item.action){
					jump_url = '/pages/home/sub/record';
				}else if('search' == item.action){
					jump_url = '/pages/home/sub/search';
				}else if('technology' == item.action){
					jump_url = '/pages/owner/sub/tech-support';
				}
				uni.navigateTo({
					url:jump_url
				});
			}
		}
	}
</script>

<style>
	@charset "UTF-8";
	.grid-item-box {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}
	
	.item-text {
		font-size: 45rpx;
	}
</style>
